<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>所有客户</title>
	<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<style>
        /*下拉按钮样式**/
        .down-panel{
            padding: 0;
            z-index: 100;
            overflow:visible;
        }
        .down-panel .layui-select-title{
            padding-right:30px;
            padding-left:10px;
            overflow:visible;
        }
        .down-panel dl{
            color: #000;
            top: 30px;
            font-size: 14px;
        }
        .down-panel .layui-select-title i{
            border-top-color:#fff;
        }
        .down-panel:hover{
            opacity:1 !important;
            filter:alpha(opacity=100) !important;
            color:#fff
        }
        .layui-anim-upbit{
            top: 100% !important;
            z-index: 999999 !important;
        }
        .layui-anim-upbit dd {
            text-align: left;
        }
        .over-hover{
            overflow: visible; z-index: 9999;
        }
        .layui-select-title{
            background-color: #008FBF;
        }
        .layui-table-box{
            overflow: visible;!important;
        }
        .layui-table-body{
            overflow: visible;!important;
        }
</style>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <input type="text" name="clientname" placeholder="客户名称" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-inline">
              <select id="mold">
              	<option value="client">客户(委托人)搜索</option>
              	<option value="emp">律师搜索</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-input-inline">
				<select id="clientassign">
					<option vlaue="null">是否指派</option>
	            	<option value="是">是</option>
	            	<option value="否">否</option>
            	</select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">客户类型</label>
            <div class="layui-input-inline">
              <select id="stateclient" lay-verify="required">
                <option value="0">请选择客户类型</option>
              </select>
            </div>
          </div>
          <!--
          	查询按钮
          -->
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="layui-card-body" id="test1">
        <table id="clientall" lay-filter="test"></table>
        <div id="laypage"></div>
        <script type="text/html"  id="merchantBar">
                <div class="layui-btn-group layui-form">
                    <button type="button" class="layui-btn layui-btn-xs layui-unselect layui-form-select down-panel">
                        <div class="layui-select-title" onmouseover="downPanel(this)">
                       		     操作
                            <i class="layui-edge"></i>
                        </div>
                        <dl class="layui-anim layui-anim-upbit">
                            <dd>
                                <i class="layui-icon"></i>
                                <a lay-event="check">查看</a>
                            </dd>
                            <dd>
                                <i class="layui-icon"></i>
                                <a lay-event="update">修改</a>
                            </dd>
                            <dd>
                                <i class="layui-icon"></i>
                                <a lay-event="del">删除</a>
                            </dd>
                        </dl>

                    </button>
                </div>

        </script>
      </div>
    </div>
  </div>
<script src="../../../layuiadmin/layui/layui.js"></script>
<script src="../../../layuiadmin/jquery/jquery.min.js" type="text/javascript"></script>
<script>
  	function createrFormat(o){
                	return o;
    }
   $(function(){
  	layui.use(['form','table','laypage',], function(){
  		var table = layui.table
            ,form = layui.form
            ,table = layui.table //表格
		  //第一个实例
		  table.render({
		    elem: '#clientall'
		    ,url: 'http://localhost:8080/client/mylistclientall' //数据接口
		    ,cols: [[ //表头
		 		{field: 'clientId', title: 'ID', sort: true, fixed: 'left'}
		      ,{field: 'clientName', title: '客户(委托人)'}
		      ,{field: 'clientPhone', title: '联系电话'}
		      ,{field: 'clientRegion', title: '地区'} 
		      ,{field: 'clientAssign', title: '是否指派'}
		      ,{field: 'clientSave', title: '入库时间', sort: true}
		      ,{templet:'<div>{{createrFormat(d.empId.empName)}}<\/div>',  title: '律师'}
		      ,{field: 'caseSituation', title: '案件情况'}
		      ,{title: '操作', fixed: 'right', align:'center' ,toolbar: '#merchantBar' }
		    ]]
		    ,id:"clients"
		    ,page: true 
		  });
 			table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                parentData = data;
                if(layEvent === 'detail'){
                    layer.open({
                        type: 2,
                        skin: 'layui-layer-lan',
                        anim: 4,
                        title: ['客户详细信息', 'font-size:18px;'],
                        offset: '10px',
                        area: ['900px', '900px'],
                        content:'amend.html',
                    });
                }
            });
		var $ = layui.$, active = {
                reload: function(){
                    //执行重载
                    table.reload('clientall', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            client_name:$('#clientname').val(),
                            client_phone:$('#clientphone').val(),
                            client_region:$('#clientregion').val(),
                            client_assign:$('#clientassign').val(),
                        }
                    });
                }
            };
            
		});
		$.ajax({
    	type:"post",
    	url:"http://localhost:8080/client/liststateall",
    	async:false,
    	success:function(date){
    		for(var i=0;i<date.length;i++){
    			var option = new Option(date[i].stateName,date[i].stateId);
					$("#stateclient").append(option);
    		}
    	}
    });
     
  });
	function downPanel(that) {
        var nodes = layui.jquery(".layui-form-selected");
        var hoverNodes = layui.jquery(".over-hover");
        var current = layui.jquery(that).parent();
        if (current.hasClass("layui-form-selected")) {
            nodes.removeClass("layui-form-selected");
            hoverNodes.removeClass("over-hover");
        } else {
            if (nodes.length > 0) {
                nodes.removeClass("layui-form-selected");
                hoverNodes.removeClass("over-hover");
            }
            current.addClass("layui-form-selected");
            current.parent(".layui-form").parent().addClass("over-hover");
        }

        layui.jquery(document).click(function(event){
            var _con2 = layui.jquery(".down-panel");
            if(!_con2.is(event.target) && (_con2.has(event.target).length ===0)){
                _con2.removeClass("layui-form-selected");
                hoverNodes.removeClass("over-hover");
                nodes.removeClass("layui-form-selected");
            }
        });
    }	
  </script>
</body>
</html>
